通过nginx反向代理解决前端访问的跨域问题

一、问题背景说明：
编写移动前端页面时需要访问后台系统接口。前端项目在本地（个人办公电脑）开发，后台接口存放后生产的后台服务器，本地的ajax请求无法直接访问后台接口，也就是遇到了跨域问题，如何在不改变后台接口的情况下解决跨域问题？

二、同源/跨域概念说明：
同源策略：是浏览器的一种安全策略，所谓同源是指域名、协议、端口完全相同，只有同源的地址才可以相互通过ajax的方式请求。
跨域：同源或不同源说的是两个地址之间的关系，不同源地址之间的请求我们称之为跨域请求。

三、nginx反向代理解决的原理：

将nginx安装在本地，然后将项目部署于nginx下，这样访问本地项目时用http://localhost/本地项目 即可访问。
然后配置nginx，通过反向代理的方式访问后台服务器，访问后台接口时使用http://localhost/后台接口名称 即可跳转到后台服务器。
这样浏览器之间的ajax请求完全满足浏览器域名、协议、端口相同的同源策略，可在不改变后台接口的情况下避免跨域问题。

四、安装和配置nginx
过程主要参考了以下两篇文章，对原理的描述很清晰、完善：
nginx解决跨域文章：https://www.cnblogs.com/renji...
nginx配置文章：http://www.cnblogs.com/renjin...

1）首先到nginx官网下载安装包：http://nginx.org/en/download....
2）windows版本nginx使用方法简要说明（cmd窗口下）：
帮助： nginx -h
启动： start nginx
重载（nginx配置更新后可使用）：nginx -s reload
停止： nginx -s stop 或者 nginx -s quit
3）nginx.conf 配置本地web项目访问路径和反向代理：

    server {
        listen       80;              //nginx服务器启动后的默认监听端口，可按自身情况修改
        server_name  localhost;        //nginx服务器的名称，

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        //以下是本地项目的部署配置：配置web服务器的根目录访问地址
        location / {
            root   myApp/mobile;
            index  index.html index.htm;
        }
        
        //以下是反向代理访问远程的后台接口的配置
        location /remote-interface/{
        //下面是反向代理配置，通过nginx服务器访问本地/remote-interface时，会将请求转到后台实际服务器去处理
            proxy_pass  http://remote-address/remote-interface/ ; 
        }

以上就是nginx本地项目部署和反向代理的配置。配置完成后，即可在项目中使用ajax请求访问后台接口。

五、发送ajax请求试验
本地项目中的ajax请求的代码示例如下，重点注意ajax请求的URL，要与nginx.conf的配置对应上：

var reqData = {             //post请求参数
                    "xxx":xxx,
            }

            $.post("/remote-interface/interface-name", reqData, function (data, status) {
                // console.log(arguments);
                if (status != "success") {     //post请求响应为失败的处理
                    console.log(status);
                    return;
                }
            
            ///请求得到响应数据后的处理操作可写在这里
               
            }, "json").error(function () {
                // console.log(arguments)
            });